<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>教学班管理</title>
    <!-- Bootstrap Styles-->
    <link href="../../css/bootstrap/bootstrap.css" rel="stylesheet"/>
    <!-- FontAwesome Styles-->
    <link href="../../css/font-awesome.css" rel="stylesheet"/>
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../../css/custom-styles.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <!-- TABLE STYLES-->
    <link href="../../js/dataTables/dataTables.bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../teacher/tea_course_index.html">题库与考试</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="../manager/adm_person_index.html"><i class="fa fa-user fa-fw"></i> 个人中心</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="../../login.html"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>

    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="../manager/adm_index.html"><i class="fa fa-dashboard"></i> 用户角色管理</a>
                </li>
                <li>
                    <a href="../manager/adm_infoManage_index.html"><i class="fa fa-desktop"></i> 用户信息管理</a>
                </li>
                <li>
                    <a href="../manager/adm_schoolClass_index.html"><i class="fa fa-bar-chart-o"></i> 系部信息管理</a>
                </li>
                <li>
                    <a href="../manager/adm_exerciseType_index.html"><i class="fa fa-sitemap"></i> 试题类型管理</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        角色类型管理
                        <a href="#mymodal_3" role="button" data-toggle="modal">
                            <div style="display: inline;float: right;">
                                <button type="button" class="btn btn-primary">+添加角色类型</button>
                            </div>
                        </a>

                    </h1>
                </div>
            </div>
            <div class="well">
                <input type="hidden" id="hibbenId" value="">
                <table class="table" id="role">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>角色类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <!-- 模态框1  -->

            <div class="modal fade" id="mymodal_1" tabindex="-1" role="dialog" aria-labelledby="myModelLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModal_1Label">
                                修改信息
                            </h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control" id="updateRoleName" placeholder="更改的角色名称">
                            <br>
                            <input type="text" class="form-control" id="updateRoleIntro" placeholder="更改的角色职能">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="updateBtn">
                                提交更改
                            </button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>
            <div class="modal fade" id="mymodal_2" tabindex="-1" role="dialog" aria-labelledby="myModelLabel"
                 aria-hidden="true">
                <input type="hidden" id="id" name="id" value="">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModal_2Label">
                                是否删除?
                            </h4>
                        </div>
                        <div class="modal-body">
                            确定删除该角色?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-danger" id="deleteBtn">
                                删除
                            </button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>
            <!-- 模态框3 -->
            <div class="modal fade" id="mymodal_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加角色类型
                            </h4>
                        </div>
                        <div class="modal-body">
                            <input class="form-control" type="text" id="roleName" placeholder="角色名称"/>
                            <br>
                            <input class="form-control" type="text" id="roleIntro" placeholder="角色介绍"/>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="addRole">
                                提交更改
                            </button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>

            <!-- /. PAGE WRAPPER  -->
            <!-- /. WRAPPER  -->
            <!-- JS Scripts-->
            <!-- jQuery Js -->
            <script src="../../js/jquery-1.10.2.js"></script>
            <!-- Bootstrap Js -->
            <script src="../../js/bootstrap.min.js"></script>
            <!-- Metis Menu Js -->
            <script src="../../js/jquery.metisMenu.js"></script>
            <!-- DATA TABLE SCRIPTS -->
            <script src="../../js/dataTables/jquery.dataTables.js"></script>
            <script src="../../js/dataTables/dataTables.bootstrap.js"></script>
            <script src="../../js/jquerysession.js"></script>
            <script>
                // 页面初始化
                $(document).ready(function () {
                    $('#dataTables-example').dataTable();
                    if ($.session.get('userid') == null) {
                        alert("请先登录！！！");
                        window.location.href = '/login.html';
                    } else {
                        if ($.session.get('usertype') != 3) {
                            alert("您没有访问这个页面的权限！！！");
                            window.location.href = '/login.html';
                        }
                    }

                    //获取现有的所有角色
                    $.ajax({
                        type: "post",
                        url: "/usertype/findAll",
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            $.each(data.data, function (index, obj) {
                                $("#role").append('<tr value="' + obj.id + '"><td>' + obj.id + '</td><td>' + obj.usertype + '</td><td>' +
                                    '<button data-target="#mymodal_1" class="btn btn-primary" data-toggle="modal" onclick="UserTypeId(' + obj.id + ')">修改角色 </button>' +
                                    '<button data-target="#mymodal_2" data-toggle="modal" class="btn btn-danger" onclick="UserTypeId(' + obj.id + ')">删除角色</button>' +
                                    '</td></tr>');
                            })
                        }
                    });
                });

                // 添加角色
                $("#addRole").click(function (e) {
                    e.preventDefault();
                    var roleName = $('#roleName').val();
                    var roleIntro = $('#roleIntro').val();
                    console.log(roleName);
                    console.log(roleIntro);
                    if (roleName == "" || roleIntro == "") {
                        alert("请输入正确的信息");
                    } else {
                        var role = JSON.stringify({"usertype": roleName, "introduce": roleIntro});
                        $.ajax({
                            type: 'post',
                            url: '/usertype/addOne',
                            data: role,
                            contentType: "application/json",
                            dataType: 'json',
                            success: function (data) {
                                console.log(data);
                                if (data.msg == 'success') {
                                    alert("添加成功");
                                } else {
                                    alert("添加失败");
                                }
                                window.location.href = "adm_index.html";
                            }
                        })
                    }
                });


                var userType = 0;

                function UserTypeId(id) {
                    userType = id;
                }

                //删除角色
                $("#deleteBtn").click(function (e) {
                    e.preventDefault();
                    console.log(userType);
                    $.ajax({
                        type: 'get',
                        url: '/usertype/remove/' + userType,
                        dataType: 'json',
                        success: function (data) {
                            if (data.msg == "success") {
                                alert("删除成功");
                            } else {
                                alert("删除失败");
                            }
                            window.location.href = "adm_index.html";
                        }
                    })

                });

                // 更新角色
                $("#updateBtn").click(function (e) {
                    e.preventDefault();
                    var updateRoleType = $('#updateRoleName').val();
                    var updateRoleIntro = $('#updateRoleIntro').val();
                    if (updateRoleType == "" || updateRoleIntro == "") {
                        alert("请提交徐该信息");
                        window.location.href("adm_index.html");
                    } else {
                        var updateUserType = JSON.stringify({
                            "id": userType,
                            "usertype": updateRoleType,
                            "introduce": updateRoleIntro
                        });
                        $.ajax({
                            type: 'post',
                            url: '/usertype/update',
                            data: updateUserType,
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                if (data.msg == "success") {
                                    alert("修改成功");
                                } else {
                                    alert("修改失败");
                                }
                                window.location.href = "adm_index.html";
                            }
                        })
                    }

                })
            </script>
        </div>
    </div>
</div>
</body>
</html>